<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>


    <script type="text/babel">
        // 01 组件数据源
        // state  / props
        
        // --props 是 组件对外界数据接口
        // 父组件 props : 数据 / 方法 （执行方法 | 子组件给父组件传值）； 如果还有子组件需要传值继续 props

        //--state 是 组件对内的接口
        // 组件内部使用 私有的；每个组件都独立维护自己的状态

        // 视图层 变化 前提 ： 数据驱动 ，数据就是props 和 state 发生了变化； react 提供的机制（重新计算 重新渲染）

        //02 单向数据流
        //2.1 数据：父=>子 
        // (子组件不能直接改变父组件的数据 ；
        // 子组件 通过父组件传递属性绑定引用函数 给子组件，子组件执行函数 =>可以改变父组件的状态 )

        
        // function C2(props){
        //     console.log('C2',props);
        //     return (
        //         <div>
        //             <h2>C2</h2>
        //             <h3>name:{props.name}</h3>

        //             <button onClick={props.click}>button</button>
        //         </div>
        //     )
        // }

        function C2(props){
            console.log('C2',props);

            const {name,click} = props
            return (
                <div>
                    <h2>C2</h2>
                    <h3>name:{name}</h3>
                    <button onClick={click}>button</button>
                </div>
            )
        }

        function C1(props){
            console.log('C1',props); // {name:'jack'}
            return (
                <div>
                    <h2>C1</h2>
                    {/*name={props.name} => name = 'jack'=>{name:'jack'}=>props */}
                    {/*<C2 name={props.name}/>  */}
                    {/*... 拆包 / 打包 ； 注意： key 固定的，好处 数据多的方便*/}
                    {/*<C2 {...props}/>*/}

                    <C2 {...props}/>
                </div>
            )
        }


        class  App extends React.Component{
            //数据
            state ={name:'jack',age:18,single:false}


            // 改变 父组件状态
            // handleClick = ()=>{
            //     this.setState({
            //         single:true
            //     })
            // }

            handleClick = (single)=>{
                this.setState({
                    single:single
                })
            }

            render(){
                return (
                    <div>
                        <h1>App 组件</h1>
                        <h3>single:{this.state.single?'单身':'不单身'}</h3>
                        <C1 name={this.state.name}/>
                        <C1 {...this.state} click={this.handleClick}/>
                    </div>
                )
            }
        }
      

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>